<template>
  <div class="box">
    <div class="demiware">
      <div class="demiware_top"><p>泰捷云学产品试用申请</p></div>
      <div class="demiware_bootom">
        <p>请您如实填写相关信息，以便工作人员稍后联系您开通试用账号～</p>
        <div class="demiware_box">
          <div class="from_box">
            <el-form
              :label-position="labelPosition"
              label-width="160px"
              :model="formLabelAlign"
            >
              <el-form-item label="姓名">
                <el-input
                  v-model="formLabelAlign.nickname"
                  style="width: 594px"
                  placeholder="请输入您的姓名"
                ></el-input>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input
                  v-model="formLabelAlign.mobile"
                  placeholder="请输入您的联系电话"
                ></el-input>
              </el-form-item>
              <el-form-item label="机构名称">
                <el-input
                  v-model="formLabelAlign.company"
                  placeholder="请输入机构名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="所在地区">
                <el-select
                  v-model="formLabelAlign.region"
                  placeholder="请选择所在的地区"
                  style="width: 594px"
                >
                  <el-option
                    v-for="(item, index) in columns"
                    :label="item"
                    :value="item"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="您还有哪些疑问或需求">
                <el-input
                  type="textarea"
                  :rows="5"
                  placeholder="请输入您的疑问或需求"
                  v-model="formLabelAlign.content"
                >
                </el-input>
              </el-form-item>
              <el-button type="primary" @click="onSubmit" class="btn"
                >提交</el-button
              >
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "@/utils/request";
export default {
  data() {
    return {
      tel_test: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
      labelPosition: "right",
      formLabelAlign: {
        nickname: "",
        mobile: "",
        company: "",
        region: "",
        content: "",
      },
      columns: [],
    };
  },
  methods: {
    onSubmit() {
      if (!this.formLabelAlign.nickname) {
        return this.$message.error("请填写您的姓名");
      }

      if (!this.tel_test.test(this.formLabelAlign.mobile)) {
        return this.$message.error("联系电话格式有误");
      }

      if (!this.formLabelAlign.region) {
        return this.$message.error("请选择您的所在地区");
      }
      // if(!this.content){
      //    return this.$toast.fail('请填写您的需求,方便我们安排专业人员与您联系')
      // }
      axios({
        method: "post",
        // url:'/api/index/feedback/create',
        url: "https://b.taijieyun.com/index/feedback/create",
        data: this.formLabelAlign,
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("提交成功");
            this.formLabelAlign = {
              nickname: "",
              mobile: "",
              company: "",
              region: "",
              content: "",
            };
          } else {
            this.$message.error("提交失败");
          }
        })
        .catch((err) => {
          this.$message.error("服务器错误");
        });
    },
  },
  created() {
    axios({
      method: "get",
      url: "https://b.taijieyun.com/admin/region/regionList",
      params: {
        region_id: "0",
      },
    }).then((res) => {
      let data = res.data;
      if (data.code == 200) {
        data.data.list.map((item) => {
          this.columns.push(item.region_name);
        });
      }
    });
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  display: flex;
  flex-direction: column;
  .demiware {
    width: 1200px;
    height: 1022px;
    margin: 0 auto;
    .demiware_top {
      height: 100px;
      line-height: 100px;
      font-size: 36px;
      font-weight: 500;
      color: #333333;
    }
    .demiware_bootom {
      height: 793px;
      background: #fbfbfb;
      p {
        width: 1200px;
        height: 100px;
        font-size: 16px;
        font-weight: 500;
        color: #d53737;
        line-height: 102px;
        text-align: center;
      }
      .from_box {
        width: 900px;
        height: 700px;
        display: flex;
        margin: 0 auto;
      }
      .btn {
        margin-left: 400px;
        margin-top: 20px;
      }
    }
  }
}
</style>